<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pea tips花园</title>
<script type="text/javascript" src="../../js/garden_main.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/base.css" />
<link rel="stylesheet" type="text/css" href="../../css/garden_main.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/pages/garden/ball_style.css" />
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
var get = function(id){return document.getElementById(id);}
var ext = function(des,src){
	for(var p in src){
		des[p] = src[p];
	}	
	return des;
}
var Garden = function(){
	//气泡样式
	var Class = ["heart","round","music"];
	//创建一个小球
	var Ball = function(){
		var B = function(){
			this.ball = document.createElement("div");	
			//气泡在x,y轴上的速度
			this.ball.sx = Math.random() * 5 - 2.5;
			this.ball.sy = Math.random() * 5 - 2.5;	
			//时间度，气泡运行的路程为sv*t	
			this.ball.t = 1;
			this.ball.cover = false;
			this.ball.articleId = 0;
			this.ball.visitTimes = 0;
			this.ball.replyTimes = 0;
			this.ball.createTime = new Date().toLocaleString();
		}
		B.prototype = {
			//owner:function(size,className,articleId,userPhoto,visitTimes,replyTimes,createTime,userName){
			owner:function(size,backImgSrc,articleId,userPhoto,visitTimes,replyTimes,createTime,userName){
				//气泡属性初始化
				//this.ball.className = className;
				//心情id
				this.ball.articleId = articleId;
				this.ball.visitTimes = visitTimes;
				this.ball.replyTimes = replyTimes;
				this.ball.createTime = createTime;
				this.ball.userName = userName;
				this.ball.userPhoto = userPhoto;
				
				with(this.ball.style) {
					//width = height = (size || 55) + 'px';  
					width = height = 100 + 'px';  
					position = 'absolute'; 
					backgroundImage = "url("+backImgSrc+")";
				}	
				
				//创建心情的用户头像
				var img = document.createElement("img");
				//var h2 = document.createElement("h2");
				
				img.style.cssText = "width:35px;height:35px;margin:30px;dispaly:block;z-Index:5";
				//img.src = userPhoto;
				reloadPicture(img,userPhoto);
				
				//h2.innerHTML = articleId;
				//h2.style.display = "none";
				/*var back = document.createElement("img");
				back.src = "/networkforum/pages/garden/images/heart1.png";
				with(back.style){
					width = "100%";
					height = "100%";
					borderRadius = "100px";
					zIndex = "0";
					position = "absolute";
					left = "0px";
					top = "0px";
				}*/
				
				this.ball.appendChild(img);
				//this.ball.appendChild(back);
				//this.ball.appendChild(h2);
			},
			remove:function(){
				get("garden").removeChild(this);						
			}
		}
		return new B();
	}	
	//主类
	var Garden = function(cid){
		var self = this;
		if(!(this instanceof Garden)){
			return new Garden(cid);	
		}
		//容器
		this.container = get(cid);
		if(!this.container){
			alert("获取id为"+cid+"的结点失败，无图像展示容器");
			return;	
		}
		//this.config = ext(Garden.Config,config||{});
		//全部的气泡			
		this.balls = [];
		//时间监听器
		this.timer = null;
		// 上下左右边界
		this.T_bound = 0;
		this.B_bound = this.container.clientHeight;
		this.L_bound = 0;
		this.R_bound = this.container.clientWidth;
		this.ball = null;
		this.isClick = false;
	}		
	Garden.prototype = {
		//数据格式
		//[{articleId:"",userPhoto:"",articleGroupId:""}]
		init:function(data){
			var self = this;
			this.createBalls(data);
			this.addTimer();
		},
		addTimer:function(){
			var self = this;
			self.timer = setInterval(function(){
				self.hitTest();	
			},15);	
		},
		createBalls:function(data){
			var self = this;
			var frag = document.createDocumentFragment();
			for(var i=0;i<data.length;i++){
				var d = data[i];
				var ball = self._newBall(d);
				//气泡统一管理
				this.balls[i] = ball;
				//先添加进画布
				frag.appendChild(ball);
			}
			this.container.appendChild(frag);
		},
		createBall:function(d){
			var ball = this._newBall(d);
			//重新定位气泡位置
			with(ball.style){
				left = (Math.random() * 1200) + 'px';
				top = (Math.random() * 700) + 'px';
			}
			this.balls.push(ball);
			//单独添加一个气泡，直接添加进document
			this.container.appendChild(ball);
		},
		_newBall:function(d){
			var self = this;
			var ball = Ball();	
			var size ;
			var className = d.kindSrc;
			//articleGroupId == 0|1|2，0意为heart,1意为round,2意为music
			/*switch(d.articleGroupName){
				case "温馨":
					size = 55;	
					className = "heart";
					break;
				case "经典":
					size = 55;
					className = "round";
					break;
				case "快乐":
					size = 55;
					className = "music";
					break;
				default:
					size = 55;
					className = 'round';
			}*/
			//初始化气泡属性
			ball.owner(size,className,d.articleId,d.userPhoto,d.visitTimes,d.replyTimes,d.createTime,d.userName);
			//气泡出现的随机位置
			with(ball.ball.style){
				left = (Math.random() * (this.R_bound-200))+100 + 'px';
				top = (Math.random() * (this.B_bound-200))+100 + 'px';
			}
			//添加事件
			ball.ball.onmouseover = function(event){
				var e = event?event:window.event;
				var node = e.target;
				if(node.tagName !="DIV"){
					node = node.parentElement;	
				}
				node.cover = true;
				Info.showGist(node);
			};
			//添加事件
			ball.ball.onclick = function(event){
				var e = event?event:window.event;
				var node = e.target;
				if(node.tagName !="DIV"){
					node = node.parentElement;	
				}
				node.cover = true;
				self.isClick = true;
				Info.showAll(node);
				self.ball = node;						
			};
			//添加事件
			ball.ball.onmouseout = function(event){
				var e = event?event:window.event;
				var node = e.target;
				if(node.tagName !="DIV"){
					node = node.parentElement;	
				}
				if(!self.isClick){
					node.cover = false;
					Info.hiddenGist();
				}
			};

			return ball.ball;
		},
		hitTest:function(){
			var balls = this.balls;
			for(var i =0;i<balls.length;i++){
				var radius = balls[i].offsetWidth/2;
				var x = balls[i].offsetLeft+radius;
				var y = balls[i].offsetTop+radius;
				for(var j = i+1;j<balls.length;j++){
					var _radius = balls[j].offsetWidth/2;
					var _x = balls[j].offsetLeft+_radius;
					var _y = balls[j].offsetTop+_radius;
					//两气泡球心的距离小于等于两气泡半斤只和，则发生碰撞
					if((Math.sqrt((x-_x)*(x-_x)+(y-_y)*(y-_y))-radius-_radius)<=2){
						var sx = balls[i].sx;
						var sy = balls[i].sy;
						balls[i].sx = balls[j].sx;
						balls[i].sy = balls[j].sy;
						balls[j].sx = sx;
						balls[j].sy = sy;
						this.move(balls[i]);
						this.move(balls[j]);
					
					}
				}
			}
			for(var i =0 ;i<balls.length;i++){
				if(!balls[i].cover){
					this.move(balls[i]);	
				}
			}
		},
		move:function(ball){
			var l = ball.offsetLeft;
			var t = ball.offsetTop;
			var r = l+ball.offsetWidth;
			var b = t+ball.offsetHeight;

			//碰撞左边
			if(l<=this.L_bound){
				ball.sx = 0 - ball.sx;	
				ball.style.left = ball.offsetLeft + 5 + 'px';	
			}
			//右边
			else if(r>=this.R_bound){
				ball.sx = 0 - ball.sx;	
				ball.style.left = ball.offsetLeft - 5 + 'px';	
			}
			//碰撞上面
			if(t<=this.T_bound){
				ball.sy = 0 - ball.sy;
				ball.style.top = ball.offsetTop + 5 + 'px';
			}
			//下面
			else if(b>=this.B_bound){
				ball.sy = 0 - ball.sy;
				ball.style.top = ball.offsetTop - 5 + 'px';
			}
			
			if(r>this.R_bound+15||b>this.B_bound+15){
				ball.parentElement.removeChild(ball);
			}
			
			with(ball.style){
				left = (ball.offsetLeft + ball.sx*ball.t) + 'px';	
				top = (ball.offsetTop + ball.sy*ball.t) + 'px';
			}
		},
		coverHandle:function(bo){
			var self = this;
			self.ball.cover = bo;
			self.isClick = bo;
		},
	}
	return Garden;
}();
var garden = null;
var url = "";
var index = 0;
var size = 30;
var searchSection = null;
window.onload = function(){
	searchSection = document.getElementById("searchBall");
	var data = null;
	get("start").onclick = function(){
		get("garden").innerHTML = "";
		garden.init(data);
	}
	get("stop").onclick = function(){
		clearInterval(garden.timer);	
	}
	garden = Garden("garden");
	url = "/networkforum/garden/garden_init.do?1=1"
	//点击气泡后通过myajax获取气泡的详细信息
	var myajax = getByAjax();
	myajax.init(null,"post",true);
	myajax.get(url+"&index=0&size=30",function(d){
		//data = eval("("+d+")");
		data = toJson(d);
		garden.init(data.balls);
		//systemStyle(data.ss,"花园");
	});
	myajax = null;

	var back = document.getElementById("back");
	back.style.backgroundImage = "url(../pages/garden/images/gb1.jpg)";
}
function remove(){		
	scrollInit();
	garden.coverHandle(false);	
	Info.hiddenAll();
	document.getElementById("mcinfo").removeChild(document.getElementById("ajaxInfo"));
	scrollsTo();
}
function changeView(event){
	event = event||window.event;
	var target = event.target;
	var url = target.src;
	url = url.slice(url.indexOf("/networkforum/"),url.lastIndexOf('.'))+".jpg";
	var back = document.getElementById("back");
	back.style.backgroundImage = "url("+url+")";
}
	
</script>
</head>
<body>
	<iframe id="tnav" class="tnav" src="/networkforum/pages/user/user_header.html"></iframe>
	<header id="header" class="header">
		<section class="ballType">
			<ul class="ulBallType">
				<li>经典</li>
				<li>
					<img src="/networkforum/pages/garden/images/round1.png" onclick="addBall(this,'经典1')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/round2.png" onclick="addBall(this,'经典2')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/round3.png" onclick="addBall(this,'经典3')"/>
				</li>
			</ul>
			<ul class="ulBallType">
				<li>快乐</li>
				<li>
					<img src="/networkforum/pages/garden/images/music1.png" onclick="addBall(this,'快乐1')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/music2.png" onclick="addBall(this,'快乐2')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/music3.png" onclick="addBall(this,'快乐3')"/>
				</li>
			</ul>
			<ul class="ulBallType">
				<li>温馨</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart1.png" onclick="addBall(this,'温馨1')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart2.png" onclick="addBall(this,'温馨2')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart3.png" onclick="addBall(this,'温馨3')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart4.png" onclick="addBall(this,'温馨4')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart5.png" onclick="addBall(this,'温馨5')"/>
				</li>
				<li>
					<img src="/networkforum/pages/garden/images/heart6.png" onclick="addBall(this,'温馨6')"/>
				</li>
			</ul>
		</section>
		<section class="gardenHandle">
			<h3>场景</h3>
			<ul class="backHandle">
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb1.gif" />
				</li>
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb2.gif" />
				</li>
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb3.gif" />
				</li>
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb4.gif" />
				</li>
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb5.gif" />
				</li>
				<li>
					<img onclick="changeView(event);" src="/networkforum/pages/garden/images/gb6.gif" />
				</li>			
			</ul>
			<input id = "start" type="button" value="飘动" />
    		<input id = "stop" type="button" value="停止" />
		</section>
    </header>
    <section id="addBall" class="addBall alpha" style="display:none;"></section>
    <section class="inner" id="inner" style="display:none;">
        <h2>泡泡创建板</h2>
        <a href="#" onclick="ballHandle('none')">
        	<img title="关闭" src="/networkforum/images/close.jpg" />
        </a>
        <div class="clear"></div>
        <section class="innerone">
            <h3>今天发布了你的气泡心语吗？</h3>
            <textarea id="useractive" wrap="physical"></textarea>
            <a href="#" onclick="createBall();"><img src="/networkforum/images/unp.jpg" /></a>    
        </section>
        <hr />
        <section class="innertwo">
            <h3>气泡属性</h3>
            <!-- <h4>更新到个人状态</h4>
            <section class="ballPrototype">
                <h5>否</h5>
                <input id="update" value="false" name="update" checked="checked" type="radio" />                
                <h5>是</h5>
                <input id="update" value="true" name="update" type="radio" />                
            </section>                
            <h4>显示我的信息</h4>
            <section class="ballPrototype">
                <h5>显示</h5>
                <input id="showInfo" value="true" name="showInfo" checked="checked" type="radio" />                
                <h5>不显示</h5>
                <input id="showInfo" value="false" name="showInfo" type="radio" />                
            </section>
            <div class="clear"></div>
             -->
            <h4>评论权限</h4>
            <section class="ballPrototype">
                <h5>所有人</h5>
                <input id="level" value="all" name="level" checked="checked" type="radio" />                
                <h5>仅好友</h5>
                <input id="level" value="friends" name="level" type="radio" />
                <h5>都不可以</h5>
                <input id="level" value="none" name="level" type="radio" />
            </section>
            <!-- <h4>保存时间</h4>
            <section class="ballPrototype">
                <h5>永久</h5>
                <input id="time" value="1000" name="time" checked="checked" type="radio" />                
                <h5>一年</h5>
                <input id="time" value="12" name="time" type="radio" />                
                <h5>半年</h5>
                <input id="time" value="6" name="time" type="radio" />                
                <h5>三个月</h5>
                <input id="time" value="3" name="time" type="radio" />                
                <h5>一个月</h5>
                <input id="time" value="1" name="time" type="radio" />                
            </section>
             -->
             <h4>气泡类型</h4>
             <section class="ballPrototype">
             	<h5 id="ballKind">温馨</h5>
             	<img id="ballSign" src="../../images/left1.jpg"/>
             </section>
        </section>
    </section>
	<section id="garden" class="garden">

    </section>
	
    <section id="ballInfo" class="ballInfo balpha" style="display:none;">
    	<h2 class="title" style="font:12px normal;color:#603;">概要信息</h2>
        <section class="userPhoto prototype">
        	<h4>用户头像</h4>
	        <img id="userPhoto" src="/networkforum/pages/garden/images/heart1.png" />    
        </section>
        <div class="clear"></div>
        <section class="userName prototype">
        	<h4>用户名</h4>
            <label id="userName">xun</label>
        </section>
        <div class="clear"></div>
        <section class="createTime prototype">
        	<h4>创建时间</h4>
            <label id="createTime">2012-02-12</label>
        </section>
        <section class="replyTimes prototype">
        	<h4>评论次数</h4>
            <label id="replyTimes">0</label>
        </section>
        <section class="visitTimes prototype">
        	<h4>浏览次数</h4>
            <label id="visitTimes">1</label>
        </section>
    </section>
    <section class="mcinfo balpha" id="mcinfo" style="display:none;">
    	<section class="mcnav">
	        <h2>详细信息</h2>    
            <a href="#" onclick="remove();" title="关闭">
            	<img src="/networkforum/images/close.jpg" />
            </a>
        </section>
    </section>
    <section class="searchBall" id="searchBall" style="">
    	<h2>快速查找</h2>
    	<h4>气泡时间</h4>
    	<div class="scope">
        	<input name="control_date" id="control_date" type="text" value="" readonly="true" onclick="new Calendar().show(this);" />
    	</div>
    	<h4>气泡类型</h4>
    	<div class="scope">
    		<h5>经典</h5>
    		<input id="kind" name="kind" class="_ball" value="经典" type="radio" checked="checked"/>
    		<h5>快乐</h5>
    		<input id="kind" name="kind" class="_ball" value="快乐" type="radio"/>
    		<h5>温馨</h5>
    		<input id="kind" name="kind" class="_ball" value="温馨" type="radio"/>
    	</div>
    	<h4>查找范围</h4>
    	<div class="scope">
    		<h5>全部</h5>
    		<input id="scope" name="scope" class="_ball" value="all" type="radio" checked="checked"/>
    		<h5>好友</h5>
    		<input id="scope" name="scope" class="_ball" value="friend" type="radio"/>
    		<h5>自己</h5>
    		<input id="scope" name="scope" class="_ball" value="myself" type="radio"/>
    	</div>
    	<span id="searchButton" onclick="searchBall();">查询</span>
    	<label>欢迎进入该模块玩乐</label>
    </section>
    <section class="page">
    	<span onclick="reloadInfo(-1)">上一批</span>
    	<span onclick="reloadInfo(1)">下一批</span>
    </section>
    <div class="back" id="back"></div>
</body>
<script type="text/javascript" src="../../js/myajax.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
<script type="text/javascript" src="../../js/reloads.js"></script>

<script type="text/javascript" src="/networkforum/js/Calendar3.js"></script>
</html>
